<template>
    <div>

        <div class="header">
            <van-icon name="checked" size="50" color="#24C373"/>
            <span>支付成功</span>
        </div>
        <div class="btn-wrap">
            <van-button type="primary" size="small" class="btn" @click="jumpOut">订单详情</van-button>
        </div>
        <ul class="content">
            <li>
                订单号：{{out_trade_no}}
            </li>
            <li>
                订单状态：{{Order_status}}
            </li>
        </ul>
    </div>
</template>
<script>
  import {getOrder} from "../../request/api";
  export default {
    name: "receipt",
    data(){
      return {
        out_trade_no: '',
        Order_status: ''
      }
    },
    methods: {
      init(){
        let _this = this,
          num = 0;
        const toast = _this.$toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: `第${num}/3次查询中，请稍等`,
        });
        let timer = setInterval(function(){
          getOrder({out_trade_no: _this.out_trade_no}).then(res => {
            if (res.errcode !== 0) return;
            let {Order_status} = res.row[0];
            num++;
            toast.message = `${num}/3`;
            if (num === 3 || Order_status !== '待支付'){
              _this.Order_status = Order_status;
              clearInterval(timer);
              _this.$toast.clear();
            }
          })
        }(),3000)

      },
      jumpOut() {
        console.log('跳转');
        let url = process.env.VUE_APP_DOMAIN + '/dist/ticketDetail?id=' + this.out_trade_no
        let mchData ={action:'jumpOut', jumpOutUrl:url}
        let postData = JSON. stringify(mchData);
        parent.postMessage(postData,'https://payapp.weixin.qq.com')
      }
    },
    mounted(){
      this.init();
    },

    created() {
      /** 点金小票的js，需要在head中引入 */
      let head = document.querySelector('head')
      let script = document.createElement('script')
      script.type = "text/javascript"
      script.src = "https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js"
      head.appendChild(script)

      let query = this.$route.query
      this.out_trade_no = query.out_trade_no
    },
  }
</script>

<style scoped lang="less">
.header{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #606060;
    font-size: 16px;
    border-bottom: 1px dotted #24C373;
    padding: 10px 0;
    & > span{
        margin-top: 10px;
    }
}
.btn-wrap{
    padding: 10px;
    box-sizing: border-box;
    .btn{
        width: 100%;
    }
}
    .content{
        padding: 10px;
        font-size: 14px;
        & >li{
            margin-bottom: 6px;
        }
    }
</style>
